<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>DingDing Admin</title>
    <!-- base:css -->
    <div th:include="includeJs::bootstrap_js"></div>
    <div th:include="includeJs::layui_js"></div>
</head>
<div class="container-scroller d-flex">
    <div th:replace="includeJs::admin_leftNav"></div>

    <div class="container-fluid page-body-wrapper">
        <div th:replace="includeJs::admin_nav"></div>
        <div class="main-panel">
<!--            表格-->
            <script type="text/html" id="top">
                <label  class="layui-form-item">
                    <label class="layui-form-label" style="width: 90px">姓名:</label>
                    <div class="layui-input-inline">
                        <input class="layui-input"  maxlength="15" id="real_name" onchange="find()" name="real_name" value=""/>
                    </div>
                    <label class="layui-form-label" style="width: 90px;">状态:</label>
                    <div class="layui-input-inline">
                        <select id="state"  name="state" lay-verify="state" lay-filter="state">
                            <option value="-1">--未选择--</option>
                            <option th:value="${T(com.ddf.publics.tool.Constant).DUE_OVER}">逾期</option>
                            <option th:value="${T(com.ddf.publics.tool.Constant).DUE_RETURN}">已还</option>
                        </select>
                    </div>
                </label>
            </script>
            <table class="layui-hide" id="test" lay-filter="test"></table>
        </div>
    </div>
</div>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" href="#" lay-event="sel">查看详情</a>
</script>

<script>
    let d_state = [[${T(com.ddf.publics.tool.Constant).DUE_RETURN}]]
    let table;
    layui.use('table', function(){
        table = layui.table;
        //温馨提示：默认由前端自动合计当前行数据。从 layui 2.5.6 开始： 若接口直接返回了合计行数据，则优先读取接口合计行数据。
        //详见：https://www.layui.com/doc/modules/table.html#totalRow
        table.render({
            elem: '#test'
            ,url:'/due/dueJson'
            // ,toolbar: '#toolbarDemo'
            ,title: '用户逾期表'
            ,id:"dueList"
            ,totalRow: true
            ,cols: [
                [
                // ,{field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true, totalRowText: '合计'}
                {field:'real_name', title:'申请人'}
                ,{field:'type', title:'借款类型'}
                ,{field:'d_qishu', title:'逾期期数'}
                ,{field:'d_time', title:'逾期时间',templet:"<div>{{layui.util.toDateString(d.d_time, 'yyyy-MM-dd HH:mm:ss')}}</div>"}
                ,{field:'l_id', hide:true}
                ,{field:'dueday', title:'逾期天数'}
                ,{field:'l_month', title:'借款期数'}
                ,{field:'d_state', title:'状态', templet:function (d) {
                        if (d.d_state==d_state){
                            return "已还";
                        }else {
                            return "逾期";
                        }
                    }}
                ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
             ]
            ]
            ,toolbar: '#top'
            ,page: true
            ,limits:[10,20,30,40,50,100]
        });

        //工具栏事件
        table.on('tool(test)', function(obj){
            var data = obj.data;
            if('sel'===obj.event){
                window.location.href="/admin/audit/"+data.l_id;
            }
        });
    });

    function find() {
        let $real_name = $("#real_name").val();
        let $state = $("#state").val();
        table.reload('dueList',{
            url:'/due/dueJson',
            where:{
                state:$state,
                realName:$real_name
            }
            ,page: true
            ,limits:[10,20,30,40,50,100]
            ,done: function(res, page, count){
                //年利率
                $("[data-field='d_state']").children().each(function(){
                    let d = $(this).text();
                    if (d.d_state==d_state){
                        return "已还";
                    }else {
                        return "逾期";
                    }
                })
            }
        })
        $("#real_name").val($real_name);
        $("#state").val($state);
    }
    layui.use('form', function(){
        var form = layui.form;
        form.on('select(state)', function(data){
            find();
        });
    });
    //时间转换函数
    function showTime(tempDate){
        var d = new Date(tempDate);
        var year = d.getFullYear();
        var month = d.getMonth();
        month++;
        var day = d.getDate();
        var hours = d.getHours();

        var minutes = d.getMinutes();
        var seconds = d.getSeconds();
        month = month<10 ? "0"+month:month;
        day = day<10 ? "0"+day:day;
        hours = hours<10 ? "0"+hours:hours;
        minutes = minutes<10 ? "0"+minutes:minutes;
        seconds = seconds<10 ? "0"+seconds:seconds;
        var time = year+"-"+month+"-"+day+" "+hours+":"+minutes+":"+seconds;
        return time;
    }
</script>
</body>
</html>